<!DOCTYPE html>
<html lang="en">

<head>
    <title>Getting Started with JavaFX</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="description" content="Getting started with JavaFX for Java desktop application development">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <!-- If too heavy, replace it with SVG -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/solid.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css">

    <!-- Gluon CSS -->
    <link rel="stylesheet" href="css/gluon.css">
    <!-- GA Header JS -->
    <script src="js/ga-header.js"></script>
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-primary navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="../index.html">JavaFX</a>
            <button id="nav-btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarDiv">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#introduction">Introduction</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#install-java">Install Java</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#install-javafx">Run HelloWorld using JavaFX</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#maven">Run HelloWorld via Maven</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#gradle">Run HelloWorld via Gradle</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular">Runtime images</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular" data-scroll="#MOD-CLI">Modular from CLI</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular" data-scroll="#MOD-Maven">Modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular" data-scroll="#MOD-Gradle">Modular with Gradle</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular" data-scroll="#JDK-FX">Custom JDK+JavaFX image</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#modular" data-scroll="#Non-Mod">Non-Modular project</a></li>

                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij">JavaFX and IntelliJ</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-IDE">Non-modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-Maven">Non-modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-Gradle">Non-modular with Gradle</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-Mod-IDE">Modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-Mod-Maven">Modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Intellij" data-scroll="#IDEA-Mod-Gradle">Modular with Gradle</a></li>
                                
                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans">JavaFX and NetBeans</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-IDE">Non-modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-Maven">Non-modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-Gradle">Non-modular with Gradle</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-Mod-IDE">Modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-Mod-Maven">Modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-NetBeans" data-scroll="#NB-Mod-Gradle">Modular with Gradle</a></li>

                    <li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse">JavaFX and Eclipse</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-IDE">Non-modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-Maven">Non-modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-Gradle">Non-modular with Gradle</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-IDE">Modular from IDE</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-Maven">Modular with Maven</a></li>
                    <li class="nav-item sub-item"><a class="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show" href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-Gradle">Modular with Gradle</a></li>

                </ul>
            </div>
        </div>
    </nav>
    
    <div class="page-wrapper container-fluid">
        <div class="container">
            <h1>Getting Started with JavaFX</h1>
            <div class="row">
                <div class="col-md-3 sidenav">
                    <div class="list-group">
                        <a class="list-group-item active" href="#introduction">Introduction</a>
                        <a class="list-group-item" href="#install-java">Install Java</a>
                        <a class="list-group-item" href="#install-javafx">Run HelloWorld using JavaFX</a>
                        <a class="list-group-item" href="#maven">Run HelloWorld via Maven</a>
                        <a class="list-group-item" href="#gradle">Run HelloWorld via Gradle</a>
                        <ul class="list-group">
                            <li class="list-group-item checked"><a class="ref-group" href="#modular">Runtime images</a>
                                <ul class="list-group-sub">
                                    <li class="list-group-item checked"><a href="#modular" data-scroll="#MOD-CLI" class="scrollto">Modular from CLI</a></li>
                                    <li class="list-group-item checked"><a href="#modular" data-scroll="#MOD-Maven" class="scrollto">Modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#modular" data-scroll="#MOD-Gradle" class="scrollto">Modular with Gradle</a></li>
                                    <li class="list-group-item checked"><a href="#modular" data-scroll="#JDK-FX" class="scrollto">Custom JDK+JavaFX image</a></li>
                                    <li class="list-group-item checked"><a href="#modular" data-scroll="#Non-Mod" class="scrollto">Non-Modular project</a></li>
                                </ul>
                            </li>
                            <li class="list-group-item checked"><a class="ref-group" href="#IDE-Intellij">JavaFX and IntelliJ</a>
                                <ul class="list-group-sub">
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-IDE" class="scrollto">Non-modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-Maven" class="scrollto">Non-modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-Gradle" class="scrollto">Non-modular with Gradle</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-Mod-IDE" class="scrollto">Modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-Mod-Maven" class="scrollto">Modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Intellij" data-scroll="#IDEA-Mod-Gradle" class="scrollto">Modular with Gradle</a></li>
                                </ul>
                            </li>
                            <li class="list-group-item checked"><a class="ref-group" href="#IDE-NetBeans">JavaFX and NetBeans</a>
                                <ul class="list-group-sub">
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-IDE" class="scrollto">Non-modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-Maven" class="scrollto">Non-modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-Gradle" class="scrollto">Non-modular with Gradle</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-Mod-IDE" class="scrollto">Modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-Mod-Maven" class="scrollto">Modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-NetBeans" data-scroll="#NB-Mod-Gradle" class="scrollto">Modular with Gradle</a></li>
                                </ul>
                            </li>
                            <li class="list-group-item checked"><a class="ref-group" href="#IDE-Eclipse">JavaFX and Eclipse</a>
                                <ul class="list-group-sub">
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-IDE" class="scrollto">Non-modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-Maven" class="scrollto">Non-modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-Gradle" class="scrollto">Non-modular with Gradle</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-IDE" class="scrollto">Modular from IDE</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-Maven" class="scrollto">Modular with Maven</a></li>
                                    <li class="list-group-item checked"><a href="#IDE-Eclipse" data-scroll="#ECLIPSE-Mod-Gradle" class="scrollto">Modular with Gradle</a></li>
                                </ul>
                            </li>
                        </ul>
                        <a class="list-group-item" href="#next-steps">Next Steps</a>
                    </div>
                </div>
                <div class="content col-md-9">
                    <div id="introduction">
                        <div data-include="introduction.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Introduction">Report a problem</a>
                            <a class="btn btn-primary mr-2 mb-2" href="#install-java" role="button">Install Java</a>
                            <a class="btn btn-primary mb-2" href="#install-javafx" role="button">I have Java installed</a>
                        </div>
                    </div>
                    <div id="install-java" class="hidden">
                        <div data-include="install-java.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Install Java">Report a problem</a>
                            <a class="btn btn-primary mb-2" href="#install-javafx" role="button">Install JavaFX SDK</a>
                        </div>
                    </div>
                    <div id="install-javafx" class="hidden">
                        <div data-include="install-javafx.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Install JavaFX">Report a problem</a>
                            <a class="btn btn-primary mb-2" href="#maven" role="button">Run HelloWorld via Maven</a>
                        </div>
                    </div>
                    <div id="maven" class="hidden">
                        <div data-include="maven.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Maven">Report a problem</a>
                            <a class="btn btn-primary mb-2" href="#gradle" role="button">Run HelloWorld via Gradle</a>
                        </div>
                    </div>
                    <div id="gradle" class="hidden">
                        <div data-include="gradle.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Gradle">Report a problem</a>
                            <a class="btn btn-primary mb-2" href="#modular" role="button">Runtime images</a>
                        </div>
                    </div>
                    <div id="modular" class="hidden">
                        <div data-include="modular.html"></div>
                        
                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="Modular">Report a problem</a>
                            <a class="btn btn-primary mr-2 mb-2" href="#IDE-Intellij" role="button">Use IntelliJ IDEA</a>
                            <a class="btn btn-primary mr-2 mb-2" href="#IDE-NetBeans" role="button">Use NetBeans</a>
                            <a class="btn btn-primary mb-2" href="#IDE-Intellij" role="button">Use Eclipse</a>
                        </div>
                    </div>
                    <div id="IDE-Intellij" class="hidden">
                        <div data-include="ide-intellij.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="IDE-Intellij">Report a problem</a>
                            <a class="btn btn-primary mr-2 mb-2" href="#IDE-Eclipse" role="button">Use NetBeans</a>
                            <a class="btn btn-primary mb-2" href="#next-steps" role="button">Next steps</a>
                        </div>
                    </div>
                    <div id="IDE-NetBeans" class="hidden">
                        <div data-include="ide-netbeans.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="IDE-NetBeans">Report a problem</a>
                            <a class="btn btn-primary mr-2 mb-2" href="#IDE-Eclipse" role="button">Use Eclipse</a>
                            <a class="btn btn-primary mb-2" href="#next-steps" role="button">Next steps</a>
                        </div>
                    </div>
                    <div id="IDE-Eclipse" class="hidden">
                        <div data-include="ide-eclipse.html"></div>

                        <div class="btn-toolbar bottom" role="toolbar">
                            <a class="btn btn-outline-secondary mr-2 mb-2" role="button" target="_blank" data-section="IDE-Eclipse">Report a problem</a>
                            <a class="btn btn-primary mb-2" href="#next-steps" role="button">Next steps</a>
                        </div>
                    </div>
                    <div id="next-steps" class="hidden">
                        <div data-include="next-steps.html"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Script to include html -->
    <!-- TODO: Check for Chrome compatibility -->
    <!-- TODO: hyperlinks doesn't get styled in their files -->
    <script src="https://cdn.jsdelivr.net/gh/LexmarkWeb/csi.js@0.1.0/csi.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <!--GA footer JS-->
    <script src="js/ga-footer.js"></script>
    <!-- Gluon JS -->
    <script src="js/gluon.js"></script>
</body>
</html>